<template>
  <el-dialog title="权限列表" :visible.sync="dialogVisible">
    <el-tree
      ref="tree"
      :data="userRoles"
      show-checkbox
      node-key="id"
      :default-checked-keys="checked"
      highlight-current
      :props="defaultProps"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="sureDoAssignRole">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { userRoles } from '@/router/index'
export default {
  props: {
    checked: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      userRoles,
      defaultProps: {
        label: 'title'
      }
    }
  },
  watch: {
    dialogVisible(o, l) {
      // 每次关闭窗口的时候我们就清空已经被选的选项
      if (l) this.$refs.tree.setCheckedKeys([])
    }
  },
  methods: {
    sureDoAssignRole() {
      // 提交
      this.dialogVisible = false
      // 提取所有选中的选项，然后遍历得到提交的权限发送到服务器更新用户权限
      const _1 = this.$refs.tree.getCheckedNodes()
      let value = ''
      for (let i = 0; i < _1.length; i++) {
        value += _1[i].id
        if (i !== _1.length - 1) value += ' '
      }
      this.$emit('doAssignRole', value)
    }
  }
}
</script>

<style scoped>

</style>
